import { useState } from "react"
import { Progress } from 'antd';
import "./renwu.css"
import { EllipsisOutlined, } from '@ant-design/icons';

const Renwu = () => {
    const [ren, setRen] = useState(true)

    const [txt, setTxt] = useState("")

    const [list, setList] = useState([])

    const addVal = (ins) => {
        let obj = {
            id: list.length + 1,
            title: txt,
            pid: ins,
            isCheck: false
        }
        setList(ls => [...ls, obj])
        setRen(true);
    }

    return (
        <>
            <div className="min">
                <div className="todo">
                    <div className="n1">
                        <p>
                            要做 0 / 0
                        </p>
                        <p>
                            <EllipsisOutlined />
                        </p>
                    </div>

                    <div>
                        <Progress percent={0} />
                    </div>
                    <div className="n2">
                        <ul>
                            {
                                list.map(item => {
                                    if (item.pid == 1) {
                                        return <li key={item.id}>
                                            <input type="checkbox" />
                                            <span>{item.title}</span>
                                        </li>
                                    }
                                })
                            }
                        </ul>
                    </div>
                    {
                        ren ?
                            <div className="n3" onClick={() => setRen(false)}>+新建任务</div>
                            :
                            <div className="n3">
                                <input type="text" value={txt} onChange={(e) => setTxt(e.target.value)} />
                                <button onClick={() => addVal(1)}>确定</button>
                                <button onClick={() => setRen(true)}>取消</button>
                            </div>
                    }
                </div>
                <div className="todo">
                    <div>要做 0 / 0</div>
                    <div>
                        <Progress percent={0} />
                    </div>
                    <div className="n2">
                        <ul>
                            {
                                list.map(item => {
                                    if (item.pid == 2) {
                                        return <li key={item.id}>
                                            <input type="checkbox" />
                                            <span>{item.title}</span>
                                        </li>
                                    }
                                })
                            }
                        </ul>
                    </div>
                    {
                        ren ?
                            <div className="n3" onClick={() => setRen(false)}>+新建任务</div>
                            :
                            <div className="n3">
                                <input type="text" value={txt} onChange={(e) => setTxt(e.target.value)} />
                                <button onClick={() => addVal(2)}>确定</button>
                                <button onClick={() => setRen(true)}>取消</button>
                            </div>
                    }
                </div>
                <div className="todo">
                    <div>要做 0 / 0</div>
                    <div>
                        <Progress percent={0} />
                    </div>
                    <div className="n3">+新建任务</div>
                </div>
            </div>
        </>
    )
}

export default Renwu